---
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
title: ComboBox
description: ComboBox api.
---

import SlintProperty  from '/src/components/SlintProperty.astro';
import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';

<CodeSnippetMD imagePath="/src/assets/generated/std-widget-combobox-example.png" scale="3" imageWidth="110" imageHeight="35"  imageAlt='combobox example'>
```slint
import { ComboBox } from "std-widgets.slint";
export component Example inherits Window {
    width: 100px;
    height: 100px;
    background: transparent;
    ComboBox {
        x: 5px; y: 5px;
        width: 100px;
        model: ["first", "second", "third"];
        current-value: "first";
    }
}
```
</CodeSnippetMD>

A button that, when clicked, opens a popup to select a value.

## Properties

### current-index
<SlintProperty propName="current-index" typeName="int" defaultValue="-1" propertyVisibility="in-out">
The index of the selected value (-1 if no value is selected)
```slint "current-index: 1;"
ComboBox {
    model: ["first", "second", "third"];
    current-index: 1;
}
```
</SlintProperty>

### current-value
<SlintProperty propName="current-value" typeName="string" defaultValue='""' propertyVisibility="in-out">
The currently selected text
</SlintProperty>

### enabled
<SlintProperty propName="enabled" typeName="bool" defaultValue="true">
Defaults to true. When false, the combobox can't be interacted with
</SlintProperty>

### has-focus
<SlintProperty propName="has-focus" typeName="bool" defaultValue="false" propertyVisibility="out">
Set to true when the combobox has keyboard focus.
</SlintProperty>

### model
<SlintProperty propName="model" typeName="[string]" defaultValue="[]">
The list of possible values
```slint 'model: ["first", "second", "third"];'
ComboBox {
    model: ["first", "second", "third"];
}
```
</SlintProperty>


## Callbacks

### selected(string)
A value was selected from the combo box. The argument is the currently selected value.

```slint {3-5}
ComboBox {
    model: ["first", "second", "third"];
    selected(value) => {
        debug("Selected value: ", value);
    }
}
```
